<template>
  <div class="count">
    <h2>我是Count组件</h2>
    <p>App组件中的count是{{count}}</p>
    <button @click="handler">查看count</button>
    <p>明天的天气{{weather}}</p>
  </div>
</template>

<script>
export default {
  name: "Count",
  /* 
    1.如果想要在组件实例上拿到父组件传递过来的props,必须先进行接收
    2. 接受props之后,就可以通过this.$props这个对象中拿到数据了

      注意：props的数据不可修改，如果非要修改，可以设置一个data赋值，然后修改data。这样父组件传递过来的值不会改变
  */
  // props: ["count","add"],
  /* props: {
    count: Number,
    add: Function,
    info: {
      weather: {
        type: String,
        require: true,
        default: "暂无",
      },
      isRelax: {
        type: String,
        require: true,
        default: "暂无",
      },
      classContent: {
        type: String,
        require: true,
        default: "暂无",
      },
    },
  }, */
  props: {
    count: Number,
    weather: {
      type: String,
      require: true,
      default: "暂无",
    },
  },
  methods: {
    handler() {
      console.log(this);
    },
  },
};
</script>

<style scoped>
.count {
  background-color: pink;
}
</style>